import React, { useState, useEffect } from 'react';
import { List, InputItem, Button, Toast } from 'antd-mobile';
import { history } from 'umi';
import { inject, observer } from 'mobx-react';
import './index.less';

function Login(props: any) {
 
  const { userStore } = props;
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const handleSubmit = () => {
    if (!username) {
      Toast.fail('请输入用户名');
    } else if (!password) {
      Toast.fail('请输入密码');
    } else {
      userStore.loginAsync({ username, password });
    }
  };

  const handleClick = () => {
    history.push('/register');
  };

  useEffect(() => {}, []);

  return (
    <div className="login-page">
      <List renderHeader={() => '用户登录'}>
        <InputItem
          placeholder="用户名"
          value={username}
          onChange={v => setUsername(v)}
        >
          用户名：
        </InputItem>
        <InputItem
          placeholder="密码"
          type="password"
          value={password}
          onChange={v => setPassword(v)}
        >
          密码：
        </InputItem>
      </List>
      <Button type="warning" onClick={handleSubmit}>
        登录
      </Button>
      <div className="register" onClick={handleClick}>
        没有账户，去注册
      </div>
    </div>
  );
}

export default inject('userStore')(observer(Login));
